<template>
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title clearfix">
                <span>{{ title }}</span>
                <a href="#" @click.prevent.stop="closePanel" class="pull-right">
                    <icon type="fa-times"/>
                </a>
                <a href="#" data-id="collapse-btn" class="pull-right">
                    <icon class="fa-chevron-down"  :type="hide === false ? 'rotate-360' : 'rotate-180'"/>
                </a>
                <a href="#" data-id="collapse-full-screen" class="pull-right" @click.prevent="fullScreen">
                    <icon type="fa-expand"/>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" v-bind:class="hide === false ? 'in' : ''" data-id="collapse-body"
             :aria-expanded="hide === false">
            <div class="panel-body">
                <slot/>
            </div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */

    import Icon from '../widget/Icon.vue';

    export default {
        components: {
            Icon
        },
        name: 'collapse-panel',
        data () {
            return {
                show: !this.hide
            };
        },
        props: {
            title: {type: String},
            hide: {type: Boolean, default: false}
        },
        mounted () {
            this.eventPanel();
            this.switchCollapse();
        },
        methods: {
            closePanel (event) {
                let me = event.srcElement;
                let parent = $(me).parents('div[class*="panel"]');
                parent.addClass('animated bounceOut');
                setTimeout(() => {
                    parent.remove();
                }, 1000);
            },
            eventPanel () {
                let btn = $('a[data-id="collapse-btn"]', $(this.$el));
                let target = $('div[data-id="collapse-body"]', $(this.$el));
                btn.click((e) => {
                    e.preventDefault();
                    let type = this.show === true ? 'hide' : 'show';
                    target.collapse(type);
                    this.show = !this.show;
                });
            },
            switchCollapse () {
                let target = $('div[data-id="collapse-body"]', $(this.$el));
                let icon = $('a[data-id="collapse-btn"] > i', $(this.$el));
                target.on('show.bs.collapse', function () {
                    icon.removeClass('rotate-180');
                    icon.addClass('rotate-360');
                });
                target.on('hide.bs.collapse', function () {
                    icon.removeClass('rotate-360');
                    icon.addClass('rotate-180');
                });
            },
            fullScreen (e) {
                let icon = $(e.srcElement);
                if (icon.hasClass('fa-expand')) {
                    icon.removeClass('fa-expand');
                    icon.addClass('fa-compress');
                    $(this.$el).addClass('panel-full-screen');
                } else {
                    icon.removeClass('fa-compress');
                    icon.addClass('fa-expand');
                    $(this.$el).removeClass('panel-full-screen');
                }
            }
        },
        watch: {
            hide (val) {
                this.show = !val;
            }
        }
    };
</script>

<style scoped="" lang="scss">
    .panel {
        transition: all .4s;
    }

    .panel-title a {
        margin-left: 8px;
    }

    .panel-full-screen {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1040;
        max-height: 100%;
        overflow-y: auto;
        transition: all .5s;
        &:after {
            content: '';
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .8);
            position: fixed;
        }
    }
</style>
